<!--
 * @Author: y001554
 * @Date: 2023-01-16 20:11:08
 * @LastEditors: y001554
 * @LastEditTime: 2023-06-13 14:30:24
 * @FilePath: \ylwl\src\demos\search.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by FE/ylwl, All Rights Reserved. 
-->

<template>
  <div style="padding: 0 10px; height: 100vh">
    <div>搜索表单</div>
    <div>
      <M-Search :form-options="formOptions" @submit="test" />
    </div>
    <!-- <el-select v-model="treevalue" clearable>
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select> -->
    <!-- <el-input  /> -->
    <!-- <el-button type="primary" @click="test">初始值设置</el-button> -->
    <!-- <el-button @click="reset">ref调用测试</el-button>  -->
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, Ref } from 'vue'
// import utils from '@@/utils/index'
defineOptions({
  name: 'Demos'
})
const treevalue = ref('12')
interface FormType {
  citys: string | number | Array<any>
}
const rules = ref({
  username: [{ required: true, message: '电风扇电风扇给的', trigger: 'blur' }],
  usergroup: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' }
  ]
})
const prop = ref({
  defaultForm: {
    // username: '我是默认值'
    // usergroup: '\'
  },
  showLabel: false
})
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
//士大夫撒旦
const demo = ref([
  {
    label: '级别',
    kayName: 'userlevel',
    type: 'input',
    hideInSearch: false,
    value: 123435345
  },
  {
    label: '名称',
    kayName: 'myname',
    type: 'input',
    hideInSearch: true
  },
  // {
  //   label: '班级',
  //   kayName: 'userunit',
  //   type: 'radio',

  //   autoLoadOptions: true,
  //   optionsPromise: (item: any) => {
  //     return new Promise((rol, rej) => {
  //       setTimeout(() => {
  //         rol([
  //           {
  //             value: '123',
  //             label: '一班'
  //           },
  //           {
  //             value: '456',
  //             label: '二班'
  //           }
  //         ])
  //       }, 2000)
  //     })
  //   }
  // },
  // {
  //   label: '兴趣爱好',
  //   kayName: 'userInterest',
  //   type: 'checkbox',
  //   options: [
  //     {
  //       value: '123',
  //       label: '篮球'
  //     },
  //     {
  //       value: '456',
  //       label: '羽毛球'
  //     }
  //   ]
  // },
  {
    label: '入学时间',
    kayName: 'usergroup',
    type: 'datePicker',
    hideInSearch: true,
    iProps: {
      // type: 'date'
      // filterable: true,
      // remote: true
      // style: 'width:460px'
      // multiple: true
    }
  },

  {
    label: '姓名',
    kayName: 'username',
    type: 'input'
  },
  {
    label: '学号',
    kayName: 'usernumber',
    type: 'number',
    fProps: {},
    iProps: {
      onChange: (e: number) => {
        console.log(e)
      },
      clearable: true
    }
  }
])

const formOptions = reactive({
  rules,
  formModel: demo,
  customerProps: prop
})
const test = (res: any) => {
  console.log('res', res)
}

// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
